<template>
  <div class="listAlbum">
    <div class="wrapper" ref="wrapper">
      <div class="content">
        <ul class="songList">
          <li class="songInfo" v-for="item in list" :key="item.content_id" @click="albumPage(item)">
            <img v-lazy=item.cover />
            <!-- <h2 class="songName">
              {{ item.cover }}
            </h2> -->
            <span class="singerName"> {{ item.title }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import { mapMutations } from 'vuex'
export default {
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  methods: {
    ...mapMutations(['setType', 'setSongList']),
    async albumPage (alubmDate) {
      // 改变vuex中存储的歌手信息
      // 专辑/歌单名

      // const { data: res } = await this.$http.get('api/songlist?id=' + id)

      // console.log(res)
      // const songs = res.songlist
      // // 搜索结果为空
      // if (songs === undefined) {
      //   this.setSongList([])
      //   return
      // }
      // songs.forEach(item => {
      //   item.mid = item.songmid
      //   item.name = item.songname
      //   item.album = {
      //     id: item.albumid,
      //     mid: item.albummid,
      //     name: item.albumname
      //   }
      // })
      this.setType('歌单')
      console.log('跳呀')
      const id = alubmDate.content_id
      this.$router.push('/songlist?id=' + id)
    }
  },
  // computed () {
  //   mapState(['songs'])
  // },
  mounted () {
    const options = {
      click: true,
      tap: true,
      mouseWheel: true, // 开启鼠标滚轮
      disableMouse: false, // 启用鼠标拖动
      disableTouch: false // 启用手指触摸
    }
    this.scroll = new BScroll(this.$refs.wrapper, options)
  }
}
</script>

<style lang="stylus" scoped>
.listAlbum {

}
.wrapper {
  height: 100vh;
  overflow: hidden;
}
.songList {
  padding: 0 20px;
  .songInfo {
    display: flex;
    align-items: center;
    padding:10px 0;
  }
  img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 20px;
  }
  span {
    flex: 1;
    font-size: 16px;
    line-height:20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>
